<!DOCTYPE html>
<html>
<head>
	<title>Example 1</title>
	<link rel="stylesheet" type="text/css" href="css/jquery-ui.css">
	<script type="text/javascript" src='js/jquery.js'></script>
	<script type="text/javascript" src='js/jquery-ui.js'></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$('#nav').tabs({
				ajaxOptions: {
					error: function(xhr, status, index, anchor){
						$(anchor.hash).html("Couldn't load this tab. We'll try to fix this as soon as possible. If this wouldn't a demo.");
					}
				}
			});
			// $('#slider').slider({
			// 	range: true,
			// 	min: 0,
			// 	max: 500,
			// 	values: [25, 450],
			// 	slide: function(event, ui){
			// 		$('#amount').val("$" + $("#slider").slider("values",0) + " - $" + $("#slider").slider("values",1));
			// 	}
			// });
			// $("#amount").val("$" + $("#slider").slider("values",0) + " - $" + $("#slider").slider("values",1));
		});
	</script>
</head>
<body>
	<div class='demo'>
		<div id='nav'>
			<ul>
				<li><a href="#tab1">Home</a></li>
				<li><a href="ajax/content1.html">Our Books</a></li>
				<li><a href="ajax/content2.html">FAQ</a></li>
				<li><a href="ajax/content3-broken.php">Contact(broken)</a></li>
			</ul>
			<div id='tab1'>
				This content is preloaded.
			</div>
		</div>	
	</div>
</body>
</html>